<template>
  <view class="dark city-location">
    <view class="city-location-view">
      <!-- <Location /> -->
      <i class="iconfont icon-location icon-box"></i>
      <text>自动定位</text>
    </view>
    <view class="city-location-text-box">
      <text class="city-location-text-text">{{ currentCity_local }}</text>
    </view>
  </view>
</template>

<script>
  import Location from "@/components/common/icon/LocationIcon.vue";
  export default {
    name: "cityLocation",
    components: {
      Location,
    },
    data() {
      return {
        currentCity_local: "北京",
      };
    },
    methods: {},
    props: {
      currentCity: {
        type: String,
        default: "北京",
      },
    },
    watch: {
      currentCity(newVal) {
        this.currentCity_local = newVal;
      },
    },
  };
</script>

<style>
  .city-location {
    background-color: #8d8d8d63 !important;
    color: #f0f0f0;
    height: 50px;
    margin: 0 5px;
    padding: 10px 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
  }
  .city-location-view {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .city-location-view-box > .city-location-text-text {
    padding-left: 10px;
  }
</style>
